import React, { useState,useEffect } from 'react'
import moment from 'moment';

export default function Lifethree() {

    //创建ref容器
    // inputvalue=React.createRef();
    // div=React.createRef();

    //状态  数据
    let [usetime,setUsetime]=useState(moment().format('YYYY-MM-DD HH:mm:ss'))

    let [count,setCount]=useState(1);

    // add 自增
    let add=()=>{
        setCount(++count);
    }

    //  模拟生命周期  相当于  componentDidMount组件完成挂载执行  和 compoentDidUpdate组件在更新时
    useEffect(()=>{
        // console.log('componentDidMount组件完成挂载执行  和 compoentDidUpdate');
    })
    //  可以调用多次

    //创建  定时器
    let timeinterval=null

    //  模拟生命周期  只模拟 componentDidMount
    useEffect(()=>{
        // console.log('只模拟 componentDidMount');
        timeinterval = setInterval(()=>{
            setUsetime(
                moment().format('YYYY-MM-DD HH:mm:ss')
            )
            console.log('组件完成挂载执行执行定时器');
        },1000)
    },[])

    //模拟生命周期  单独模拟 componetWillUnmount
    //记得加参数【】
    useEffect(()=>{
        return ()=>{
            console.log('单独模拟 componetWillUnmount,组件将要卸载了~~~');
        }
    },[])

  return (
    <>
        <h1>生命周期组件-函数组件</h1>
        <div style={{width:'500px',height:'100px',lineHeight:'100px',border:"1px solid gray",fontSize:"30px",textAlign:"center"}}>{usetime}</div>
        <h2>{count}</h2>
        <button onClick={add}>点击自增</button>
    </>
  )
}
